<!--
 * @Description: 操作日志
 * @Author: zhangchangcheng
 * @Date: 2023-07-03 15:51:48
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-07 18:17:42
-->
<template>
  <div class="log-list-container">
    <CPageTable @register="registerPage" v-model:searchForm="searchForm">
      <template #headerRightButton>
        <el-button type="primary" @click="handleExportLog" v-btnPermission="'OPERATION_LOG_EXPORT'"
          ><CIcon type="c-xian-daochu" class="g-mr4"></CIcon>导出日志</el-button
        >
      </template>
    </CPageTable>
    <exportLogDialog v-model:visible="dialogVisible"></exportLogDialog>
  </div>
</template>

<script lang="ts">
export default {
  name: 'OperationLog'
};
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useLogList } from './useLogList';
import exportLogDialog from './components/ExportDialog.vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';

const dialogVisible = ref(false);
const { searchOptions, searchForm, tableOptions, tableFieldsSetting } = useLogList();
const options = reactive<CPageTableProps>({
  title: '操作日志',
  searchOptions: searchOptions,
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage] = useCPageTable(options);

const handleExportLog = () => {
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.log-list-container {
  min-height: 80%;
}
</style>
